<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan" nzRequired>{{ 'outlay.columns.name' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="nameErrorTpl">
      <input nz-input formControlName="name" [placeholder]="'outlay.modify.name_placeholder'|translate" />
      <ng-template #nameErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.name_required' | translate }}</ng-container>
        <ng-container *ngIf="control.hasError('admin')">{{ 'outlay.modify.name_admin' | translate }}</ng-container>
        <ng-container *ngIf="control.hasError('len128')">{{ 'outlay.modify.name_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan" nzRequired>{{ 'outlay.columns.type' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback [nzErrorTip]="typeErrorTpl">
      <nz-select formControlName="type" [nzPlaceHolder]="'placeholder.select'|translate" >
        <nz-option [nzValue]="''" [nzLabel]="'placeholder.select'|translate" [nzDisabled]></nz-option>
        <ng-container *ngFor="let item of typeList">
          <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
        </ng-container>
      </nz-select>
      <ng-template #typeErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.type_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan" nzRequired>{{ 'outlay.columns.money' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback [nzErrorTip]="moneyErrorTpl">
      <input nz-input formControlName="money" [placeholder]="'placeholder.input'|translate" />
      <ng-template #moneyErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.money_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan" nzRequired>{{ 'outlay.columns.time' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan" nzHasFeedback [nzErrorTip]="timeErrorTpl">
      <nz-date-picker
        formControlName="time"
        [nzMode]="'date'"
        [nzShowTime]="false"
        [nzPlaceHolder]="'placeholder.select'|translate"
      ></nz-date-picker>
      <ng-template #timeErrorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">{{ 'outlay.modify.time_required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSpan]="labelSpan">{{ 'outlay.columns.mark' | translate }}</nz-form-label>
    <nz-form-control [nzSpan]="contSpan">
      <textarea formControlName="mark" nz-input rows="5" [placeholder]="'placeholder.input'|translate"></textarea>
    </nz-form-control>
  </nz-form-item>
</form>